<template>
  <div>
    <div class="mb-3">
      <el-radio-group
        v-model="isOnlineSign"
        :disabled="contractLoading || !editable"
        @change="handleSignTypeChange"
      >
        <el-radio label="1">在线签约</el-radio>
        <el-radio label="2">线下签约</el-radio>
      </el-radio-group>
    </div>
    <div v-show="isOnlineSign === '1'">
      <el-button
        type="primary"
        size="small"
        :loading="contractLoading"
        class="btn-long"
        @click="handleContract"
      >
        合同处理
      </el-button>
      <el-button
        type="primary"
        size="small"
        class="btn-long"
        v-if="docId"
        @click="handleContractView"
      >
        合同查看
      </el-button>
    </div>
    <div v-show="isOnlineSign === '2'">
      <attach-upload
        :tags="[tag]"
        :batch-no="relatedId"
        :show-label="false"
        :view-mode="viewMode"
        v-bind="$listeners"
        @after-data="handleAfterData"
      ></attach-upload>
    </div>

    <contract-edit
      :visible.sync="editVisible"
      :query-id="relatedId"
      :view-mode="!editable"
      @success="handleEditSuccess"
    ></contract-edit>

    <el-dialog
      :visible.sync="viewContractVisible"
      :close-on-click-modal="false"
      append-to-body
      top="30px"
      width="1000px"
      title="合同查看"
      class="dialog-sm"
    >
      <pdf-view down-name="委保合同" :contract-id="docId" view-mode></pdf-view>
    </el-dialog>
  </div>
</template>

<script>
import AttachUpload from '@/bank/components/attach/Upload'

import ContractEdit from '@/bank/views/fast/ContractEdit'
import PdfView from '@/credit/views/county/unionProvince/components/PdfView'

export default {
  components: {
    AttachUpload,
    ContractEdit,
    PdfView,
  },
  props: {
    viewMode: Boolean,
    relatedId: {
      type: String,
      required: true,
    },
    tag: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      isOnlineSign: '0',
      contract: {},
      contractLoading: false,
      viewContractVisible: false,

      editVisible: false,
    }
  },
  computed: {
    contractId() {
      return this.contract.entrust_contract_id
    },
    docId() {
      return this.contract.doc_id
    },
    editable() {
      return +(this.contract.sign_status || 0) < 2 && !this.viewMode
    },
  },
  watch: {
    relatedId: {
      handler: function () {
        this.getContract()
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    // 合同处理
    handleContract() {
      this.editVisible = true
    },
    handleContractView() {
      this.viewContractVisible = true
    },
    handleSignTypeChange(val) {
      this.updateContract(val)
    },
    handleAfterData(res) {
      this.$emit('after-data', res)
    },
    handleEditSuccess(res) {
      this.getContract()
      this.$emit('success', res)
    },

    getContract() {
      if (!this.relatedId) return
      this.contractLoading = true
      this.$api
        .getData({
          table: 'entrust_contract',
          params: {
            'customer_related_id.eq': this.relatedId,
          },
        })
        .then(res => {
          this.contract = res?.data?.[0] ?? {}
          this.isOnlineSign = this.contract.is_online_sign || '0'
          this.$emit('get-contract', {
            contract: this.contract,
          })
          // 不用在 finally 后重置，因为失败了再操作会可能重复添加
          this.contractLoading = false
        })
    },
    updateContract(type) {
      if (this.contractLoading || !this.editable) return
      const data = {
        customer_related_id: this.relatedId,
        is_online_sign: type,
      }
      const then = this.contractId ? this.putData(data) : this.postData(data)
      this.contractLoading = true
      then
        .then(() => {
          this.$emit('type-change', +this.isOnlineSign)
        })
        .finally(() => {
          this.contractLoading = false
        })
    },
    putData(data) {
      return this.$api
        .updateData({
          table: 'entrust_contract',
          id: this.contractId,
          data,
        })
        .catch(err => {
          this.$message.success('更改签约类型失败')
          throw err
        })
    },
    postData(data) {
      return this.$api
        .addData({
          table: 'entrust_contract',
          data,
        })
        .then(() => {
          this.getContract()
        })
        .catch(err => {
          this.$message.success('更改签约类型失败')
          throw err
        })
    },
  },
}
</script>

<style lang="scss" scoped></style>
